<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Related Selects</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script src="src/jquery.relatedselects.min.js" type="text/javascript"></script>

<style type="text/css">
body { font:12px helvetica, arial, sans-serif; }
</style>

<script type="text/javascript">
$(function(){

	$("#example-1, #example-3").relatedSelects({
		onChangeLoad: '../../servlet/JavaObejctToJsonServlet.servlet?pluginname=relatedDependentSelects',
		defaultOptionText: 'Choose an Option',
		
		//此处为定义，必须包含 form 中相关的所有的 select id
		selects: {
			'stateID':		{ loadingMessage:'Loading Counties...' },
			'countyID':		{ loadingMessage:'Loading Towns...' },
			'townID':		{ loadingMessage:'Loading Villages...' },
			'villageID':	{}
		}
	});
	
	//应用时，value  必须为 "" ， option 才可以 disable
	//<select name="townID">
	//<option value="">Choose Town</option>
	//</select>
	
	$("#example-2").relatedSelects({
		onChangeLoad: 'datasupplier.php',
		loadingMessage: 'Please wait',
		selects: ['stateID', 'countyID', 'townID', 'villageID']
	});
	
	$("#example-4").relatedSelects({
		onChangeLoad: 'datasupplier.php',
		selects: ['stateID', 'countyID']
	});

	$("#example-5").relatedSelects({
		onChangeLoad: 'datasupplier.php',
		selects: ['stateID', 'countyID'],
		onChange: function(){
			// 'this' is a reference to the changed select box
			alert( $(this).attr('name') + ' changed!');
		},
		onLoadingStart: function(){
			// 'this' is a reference to the sibling select box that just had data loaded into it.
			$(this).siblings('div').html("Loading, please wait...");
		},
		onLoadingEnd: function(){
			// 'this' is a reference to the sibling select box that just had data loaded into it.
			$(this).siblings('div').html("Please choose an option above.");
		}
	});
	
	$("#example-6").relatedSelects({
		onChangeLoad: 'datasupplier.php',
		loadingMessage: 'Please wait',
		selects: ['stateID', 'countyID','townID'],
		disableIfEmpty:true,
		onEmptyResult: function(){
			// 'this' is a reference to the changed select box
			alert('Unable to find any matches for ' + $(this).find('option:selected').text() + '!');
		}
	});
	
	$("#example-7").relatedSelects({
		onChangeLoad: 'datasupplier.htm',
		dataType: 'html',
		selects: ['stateID', 'countyID']
	});
});
</script>

</head>

<body>

<h1>jQuery Related Selects Plugin</h1>

<ul>
<li><a href="http://github.com/ehynds/jquery-related-selects">Documentation &amp; download</a> at GitHub</li>
<li>My original <a href="http://www.erichynds.com/jquery/jquery-related-dependent-selects-plugin/">blog post and comments</a></li>
</ul>

<p>Note that in examples 1-6, the file that supplies the data <b>pauses for 1 second</b> so you can see the loading messages.</p>

<h2>Example 1(jianghui: 仅完成了这个测试项目,java 代码见 h819 工程)</h2>
<p>The state select is pre-populated, and the rest will populate based on preceding values.  Each select is configured with a custom loading message, and the default option text is set to &quot;Choose an Option&quot;.</p>
<form id="example-1">
	<select name="stateID">
	<option value="">Choose State &raquo;</option>
	<option value="MA">Massachusetts</option>
	<option value="VT">Vermont</option>
	</select>

	<select name="countyID">
	<option value="">Choose County &raquo;</option>
	</select>

	<select name="townID">
	<option value="">Choose Town &raquo;</option>
	</select>

	<select name="villageID">
	<option value="">Choose Village &raquo;</option>
	</select>
</form>

<h2>Example 2</h2>
<p>The state and county selects are pre-populated and legitimate values are selected.  Since the 'County' select already has a selected option,
the 'Town' select automatically populates. Individual selects do not have any custom settings.  No defaultOptionText override.</p>
<form id="example-2">
	<select name="stateID">
	<option value="">Choose State &raquo;</option>
	<option value="MA" selected="selected">Massachusetts</option>
	<option value="VT">Vermont</option>
	</select>

	<select name="countyID">
	<option value="">Choose County &raquo;</option>
	<option value="BARN" selected="selected">Barnstable</option>
	</select>

	<select name="townID">
	<option value="">Choose Town &raquo;</option>
	</select>
	
	<select name="villageID">
	<option value="">Choose Village &raquo;</option>
	</select>
</form>


<h2>Example 3</h2>
<p>The state select is populated, and the HTML structure of the other three are completely empty when the page loads.</p>
<form id="example-3">
	<select name="stateID">
	<option value="">Choose State &raquo;</option>
	<option value="MA">Massachusetts</option>
	<option value="VT">Vermont</option>
	</select>

	<select name="countyID"></select>

	<select name="townID"></select>

	<select name="villageID"></select>
</form>

<h2>Example 4</h2>
<p>Basic, just two selects.</p>
<form id="example-4">
	<select name="stateID">
	<option value="">Choose State &raquo;</option>
	<option value="MA">Massachusetts</option>
	<option value="VT">Vermont</option>
	</select>

	<select name="countyID">
	<option value="">Choose County &raquo;</option>
	</select>
</form>

<h2>Example 5</h2>
<p>Using the onChange, onLoadingStart &amp; onLoadingEnd callbacks.</p>
<form id="example-5">
	<select name="stateID">
	<option value="">Choose State &raquo;</option>
	<option value="MA">Massachusetts</option>
	<option value="VT">Vermont</option>
	</select>

	<select name="countyID">
	<option value="">Choose County &raquo;</option>
	</select>
	
	<div><!-- placeholder for our callback message --></div>
</form>

<h2>Example 6</h2>
<p>Using the DisableIfEmpty option &amp; the onEmptyResult callback.</p>
<form id="example-6">
	<select name="stateID">
	<option value="">Choose State &raquo;</option>
	<option value="TX">Texas</option>
	<option value="SC">South Carolina</option>
	</select>

	<select name="countyID">
	<option value="">Choose County &raquo;</option>
	</select>
	
	<select name="townID">
	<option value="">Choose Town &raquo;</option>
	</select>
	
	<div></div>
</form>


<h2>Example 7</h2>
<p>Retreiving data in HTML format instead of JSON.  This option gives you more control of the options, like the ability to add optgroups.  <a href="datasupplier.htm">View the data file.</a></p>
<form id="example-7">
	<select name="stateID">
	<option value="">Choose State &raquo;</option>
	<option value="CA">California</option>
	</select>

	<select name="countyID">
	<option value="">Choose County &raquo;</option>
	</select>
</form>

</body>
</html>

